<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>瀑布流</title>
<style type="text/css">
    *{padding: 0;
        margin: 0;}
    #main{
        position: relative;
    }
    .pin{
        padding: 15px 0 0 15px;
        float: left;
    }
    .box{
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 0 5px #ccc;
    }
    .box img{
        width: 165px;
        height: auto;
    }
</style>

<script type="text/javascript" src="js/waterfall.js"/></script>
</head>
<body>
<div id="main">
    <div class="pin">
        <div class="box">
            <img src="images/1.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/3.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/4.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/5.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/6.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/7.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/8.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/9.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/10.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/11.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/12.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/13.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/14.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/15.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/16.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/17.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/18.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/19.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/20.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/21.jpg"/>
        </div>
    </div>
</div>
</body>
</html>